<template>
    <view class="flex-col homepage">
        <view class="flex-col wrapper">
            <view class="flex-row wraper-row">
                <view class="u-line-1 text">血红蛋白</view>
                <view class="u-line-1 text-two">{{blood.hemoglobin}}</view>
            </view>
            <view class="u-line-1 text-three">参考范围：{{blood.hemoglobinReference}}</view>
        </view>
        <view class="flex-row wrapper-two">
            <view class="u-line-1 text-four">红细胞</view>
            <view class="flex-col flex-row wraper-col">
                <view class="u-line-1 text-five">参考范围：{{blood.redBloodCell}}</view>
                <view class="u-line-1 text-six">{{blood.redBloodCellReference}}</view>
            </view>
        </view>
        <view class="flex-row wrapper-three">
            <view class="u-line-1 text-seven">血小板</view>
            <view class="flex-col flex-row wraper-col">
                <view class="u-line-1 text-eight">参考范围：{{blood.bloodCells}}</view>
                <view class="u-line-1 text-nine">{{blood.bloodCellsReference}}</view>
            </view>
            <view class="u-line-1 text-ten"></view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				URL:'http://localhost:9000/',//主域名
				blood:''
			}
        },
        methods: {

        },
		onLoad(res) {
			console.log(res.id)
			uni.request({
				url:this.URL+"record/record/convention/blood/"+res.id,
				method:"GET",
				success: (res) => {
					this.blood = res.data.data.blood
				}
			})
		}
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        padding: 80rpx 16rpx 0rpx 16rpx;
        border-width: 30rpx;

        .wrapper {
            width: 100%;
            padding: 32rpx 0rpx 10rpx 0rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;

            .wraper-row {
                width: 718rpx;
                justify-content: space-between;
                margin-bottom: 8rpx;

                .text {
                    width: 164rpx;
                    font-size: 32rpx;
                }

                .text-two {
                    width: 218rpx;
                }
            }

            .text-three {
                width: 324rpx;
                margin-left: 394rpx;
                font-size: 2rpx;
                color: #aaaaaa;
            }
        }

        .wrapper-two {
            width: 718rpx;
            justify-content: space-between;
            padding: 32rpx 0rpx 28rpx 0rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;

            .text-four {
                width: 108rpx;
                font-size: 32rpx;
            }

            .wraper-col {
                width: 324rpx;

                .text-five {
                    width: 100%;
                    margin: 32rpx 0rpx -70rpx 0rpx;
                    font-size: 2rpx;
                    color: #aaaaaa;
                }

                .text-six {
                    width: 220rpx;
                    margin-left: 104rpx;
                }
            }
        }

        .wrapper-three {
            width: 718rpx;
            justify-content: space-between;
            padding: 32rpx 0rpx 28rpx 0rpx;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;

            .text-seven {
                width: 184rpx;
                font-size: 32rpx;
            }

            .wraper-col {
                width: 324rpx;

                .text-eight {
                    width: 100%;
                    margin: 32rpx 0rpx -70rpx 0rpx;
                    font-size: 2rpx;
                    color: #aaaaaa;
                }

                .text-nine {
                    width: 226rpx;
                    margin-left: 98rpx;
                }
            }

            .text-ten {
                top: -8rpx;
                left: -16rpx;
                position: absolute;
            }
        }
    }
</style>